<?php
/**
 * Description: 企业动态 新闻
 * User: Administrator
 * Date: 2018/2/1
 * Time: 14:06
 * Created by Created by Panxsoft.
 */
?>


{{-- 继承布局模板 --}}
@extends( 'official_website.layouts.main' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/news.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>{{ $title or '解决方案 - 广州市拓声电子科技有限公司'}}</title>
@endsection


@section('content')

    {{-- 隐藏的 SEO 新闻/详情 --}}
    @include('official_website.seo.article.index')

    <section class="banner solution">


    </section>

    <section class="dynamic" id="solution_case" v-cloak >

        <div class="bym-wrapper clearfix">

            <dl class="dynamic-nav bym-not-list">  

            <dd v-for="( value, key ) in sub_types"
                :key="key"                 
                :class="[parseInt(query_info.article_type_id) === parseInt(key) ? 'active': '']" @click.prevent="changeTag(key)">
                @{{ value }}
            </dd>

            </dl>

            <!--显示列表-->
            <div v-if="show_list">
                <ul v-show="!loading" class="dynamic-contents bym-not-list">
                    <li class="dynamic-content-item clearfix" v-for="article in article_list"  @click.prevent="watchCaseDetail(article.id)">
                        <div class="item-cover">
                            <img :src="article.thumb" alt="">
                        </div>
                        <h4 v-if="article.title.length > 23" :title="article.title" class="item-title">
                            @{{ article.title }}
                        </h4>
                        <h4 v-else class="item-title">
                            @{{ article.title }}
                        </h4>
                        <p class="item-desc" v-if="article.description.length > 120" :title="article.description" v-text="article.description.slice(0,120) + '...'"></p> 
                        <p class="item-desc" v-else v-text="article.description"></p>         
                        <div class="item-date">@{{ article.created_at }}</div>
                        <a href="javascript:void(0);" class="item-more">@lang('solution-case.detail')</a>
                    </li>
                </ul>

                    <!-- 分页 -->
                <bym-pagination v-if="article_list.length > 0  && !loading" v-on:change-page="changePage"
                                    :total=articles.last_page
                                    :current="articles.current_page"
                                    :next="articles.next_page_url"
                                    :perv="articles.prev_page_url"
                    ></bym-pagination>

                  
                <div class="dynamic-loading-info" v-show="loading"><p>@lang('solution-case.loading')</p></div>
                <div class="dynamic-loading-info" v-show="!loading && !article_list.length">@lang('solution-case.empty')</div>

            </div>

            <!--显示详情-->
            <div v-else>
                <div class="detail-contents">
                    <div class="detail-content-item clearfix"  v-show="!loading">
                        <div>
                            <a href="javascript:void(0);" class="go-back top" @click="goBack()">返回</a>
                            <h2 class="item-title" v-text="news_detail.title"></h2>
                            <p class="item-date"> 发布日期： <span v-text="news_detail.updated_at"></span> </p>
                        </div>
                        <div class="item-desc" v-html="news_detail.content"></div>
                    </div>
                    <div v-show="loading" class="dynamic-loading-info">
                        正在加载...
                    </div>
                    <a href="javascript:void(0);" class="go-back" @click="goBack()">返回</a>
                </div>              
            </div>
        </div>

    </section>

    {{--分页插件模板--}}
    <script type="text/x-template" id="bym_pagination">
        <ul class="bym-pagination">
            <li class="prev" v-if="current > 1"><a  href="javascript:;"  @click="clickHandle(current-1)">@lang('solution-case.previous')</a></li>
            <li class="prev" v-else><a class="disable" href="javascript:;">@lang('solution-case.previous')</a></li>
            <li v-for="index in pageList" >
                <template v-if="typeof index === 'number'" >
                    <a href="javascript:;" v-text="index" @click="clickHandle(index)" :class="[index === current ? 'active' :'']"></a>
                </template>
                <template v-else>
                    <a v-text="index" class="disable"></a>
                </template>
            </li>
            <li class="next" v-if="current < total"><a href="javascript:;" @click="clickHandle(current+1)" >@lang('solution-case.next')</a></li>
            <li class="next" v-else><a class="disable" href="javascript:;">@lang('solution-case.next')</a></li>
        </ul>
    </script>
@endsection

@section('script')
    <script type="text/javascript" src="{{asset('js/pagination.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/solution_case.js')}}"></script>
@endsection

